<template>
  <ul class="chart-pool">
    <li class="chart-item" v-for="(chart, index) in chartList" :key="index"
      :style="{ marginLeft: index % 2 != 0 ? '10px' : '18px' }">
      <div class="chart-content" draggable="true" @dragend='selectChart($event, chart.type)'>
        <svg class="icon svg-icon" aria-hidden="true">
          <use :xlink:href="`#${chart.icon}`"></use>
        </svg>
        <p>{{ chart.name }}</p>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { CHART_LIST } from '@/configs/chart'

export default defineComponent({
  name: 'chart-pool',
  emits: ['select'],
  setup(props, { emit }) {
    const chartList = CHART_LIST

    const selectChart = ($event: MouseEvent, chart: string) => {
      emit('select', { chart, $event })
    }

    return {
      chartList,
      selectChart,
    }
  },
})
</script>

<style lang="scss" scoped>
ul.chart-pool {
  overflow: hidden;

  li {
    float: left;
    width: 122px;
    height: 122px;
    margin-bottom: 10px;
    background: #fff;
    padding: 18px 13px 0;
    border-radius: 8px;

    p {
      text-align: center;
      padding: 5px 0 10px 0;
    }

    &:hover {
      cursor: move;
    }

    .icon {
      width: 100%;
      height: 74px;
    }
  }
}

// .chart-pool {

//   padding: 0 12px;
//   margin-bottom: -5px;

//   @include flex-grid-layout();
// }
// .chart-item {
//   @include flex-grid-layout-children(3, 32%);

//   height: 0;
//   padding-bottom: 32%;
//   flex-shrink: 0;
//   position: relative;
//   cursor: move;
// }
// .chart-content {
//   @include absolute-0();

//   display: flex;
//   justify-content: center;
//   align-items: center;
//   color: $contentTextColor;
//   font-size: 18px;
//   &:hover {
//     color: $themeColor;
//   }
// }
</style>